<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加和展示商品</title>
</head>
<body>
<div id="root">
    <add1 @one="two"></add1>
    <show :array4="array3"></show>

</div>
<!--添加商品组件-->
<template id="add1">
    <div id="add">
        分类 <input type="text" v-model="Obj.classify"> <br>
        价格 <input type="text" v-model="Obj.price"> <br>
        颜色 <input type="text" v-model="Obj.color"> <br>
        <button @click="click">点击展示</button>
    </div>

</template>
<!--展示内容-->
<template id="show">
    <div>
    <div v-for="(v,i) in array4">
      分类  {{v.classify}}
        价格{{v.price}}
         颜色{{v.color}}
    </div>
    </div>

</template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    <!--    添加组件-->
    let add1 = {
        template: "#add1",
        data: function () {
            return {
                Obj: {
                    classify: "",
                    price: "",
                    color: "",
                },
                array: [],

            }
        },
        methods: {
            click() {
                this.array.push(this.Obj);
                this.$emit("one",this.array)

            }
        },
        props: []
    };
    //展示组件
    let show = {
        template: "#show",
        data: function () {
            return {
                array1: [],
            }
        },
        methods: {},
        props: ["array4"]

    }
    new Vue({
        el: "#root",
        //    数据
        data: {
            array3: [],
        },
        //    函数
        methods: {
            two(a){
              this.array3=a
            }
        },
        //   组件
        components: {
            add1,
            show
        }
    })
</script>